<!-- 海报页 -->

<template>
	<view class="page">
		<!-- <image :src="wenziImg" mode=""></image> -->
		<view class="total_top" :class="[pageShow?'fileter':'']">
			<view class="top_back">
				<view class="top_img" @click="toback()">
					<image src="/static/img/other/to-back.png" mode="heightFix" @click="toback()"></image>
				</view>
			</view>
			<view class="swiper">
				<swiper class="swiper_scroll" @change='changeEvent' :current='currentIndex' nextMargin="130rpx"
					previousMargin="130rpx">
					<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key='index'>
						<view class="border" :class="[index==currentIndex?'active':'']">
							<image :src="item.img" @click="clickImg(index)"></image>
						</view>
					</swiper-item>
				</swiper>
				<image class="backImg" :src="currentImg" role="img"></image>
			</view>
			<view class="bottom">
				<view class="bottom_left com">
					<view class="">
						<button class="bg-gradual-red button" @click="toOpen">
							<u-icon name="coupon" style="margin-right: 10rpx;"></u-icon>生成专属海报
						</button>
						<!-- <image src="../../static/img/other/bought.png"></image> -->
						<view class="text">右侧小程序码长按下载</view>
					</view>
				</view>
				<view class="bottom_right com">
					<view class="bottom_right_img">
						<image :src="qr" showMenuByLongpress="true"></image>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" @change='createPosAndFil' type="top" maskClick='true' animation="false">
			<view class="isShow" v-if="pageShow">
				<!-- -->
				<view class="poster" :style="{top:top + 'px'}">
					<view class="dd" :style="[{width:width + 'px',height:height + 'px',overflow:'hidden'}]">
						<canvas style="width: 100%; height: 100%;" canvas-id="myCanvas" id="myCanvas"></canvas>
					</view>
				</view>
				<button class="bg-gradual-red button bn" @click="saveStatus">
					<u-icon name="download" style="margin-right: 10rpx;"></u-icon>保存到相册
				</button>
			</view>
		</uni-popup>
	</view>
</template>
<!--  -->
<script>
	export default {
		data() {
			return {
				// qr: 'https://img.yjpiao.cn/miniqr/152024.jpg',
				qr: '',
				top:'',
				imgList: [],
				currentImg: '',
				currentIndex: '',
				posterUrl: '',
				posterImg: '',
				width: '',
				height: '',
				pageShow: false,
				imgRatio:'',
				// wenziImg:require('@/subpages/static/2.png')
			}
		},
		onLoad() {
			this.getQrAndImg()
			this.getWidthAndHeight()
		},
		methods: {
			// 返回
			toback() {
				// console.log(1)
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取屏幕宽高
			getWidthAndHeight() {
				let res = uni.getSystemInfoSync()
				console.log(res)
				this.top = this.$store.state.topHeight * res.safeArea.bottom / res.safeArea.width
				this.width = res.windowWidth * 0.8
				this.height = res.windowHeight * 0.8
				// console.log(res)
			},
			// 点击图片
			clickImg(index) {
				console.log(index)
				this.currentIndex = index
				this.currentImg = this.imgList[index].img
			},
			// 滑动事件
			changeEvent(e) {
				this.currentIndex = e.detail.current
				this.currentImg = this.imgList[this.currentIndex].img
			},
			// 获取图片列表
			getQrAndImg() {
				this.$api.billImg({}).then(res => {
					res.data.data.forEach(item => {
						item['img'] = item['img'].replace('.jpg_480x480Q30s150.jpg','.jpg_600x800Q50s1000.jpg')
						// console.log(item)
					})
					this.imgList = res.data.data
					// console.log(this.imgList)
					this.currentImg = this.imgList[0].img
				})
				this.$api.billQr({}).then(res => {
					let qr = res.data.data.mini_qrcode
					this.qr = qr
					// uni.getImageInfo({
					// 	src:qr,
					// 	success: (res) => {
					// 		this.qr = res.path
					// 		console.log('获取二维码:',this.qr)
					// 	}
					// })
				})
			},
			// 打开底部 popup
			toOpen() {
				this.pageShow = true
				this.$refs.popup.open()
			},
			// 生成海报以及取消模糊
			createPosAndFil(e) {
				if (e.show == true) {
					uni.showToast({
						icon: 'loading',
						mask: true,
						title: '海报绘制中',
					})
					// 将图片下载到本地
					uni.getImageInfo({
						src: this.currentImg,
						success: (res) => {
							let ratio = (res.width / res.height).toFixed(2)
							if(ratio < 0.7){
								this.imgRatio = 0.7
							}else{
								this.imgRatio = ratio
							}
							this.currentImg = res.path
							uni.getImageInfo({
								src: this.qr,
								success: (res) => {
									this.qr = res.path
									this.drawPoster()
								}
							})
						}
					})			
				} else if (e.show == false) {
					this.pageShow = false
					this.posterImg = ''
				}
			},
			// 画海报
			drawPoster() {		
				let scale = uni.getSystemInfoSync().devicePixelRatio
				let ctx = uni.createCanvasContext('myCanvas', this)
				let height = this.width / this.imgRatio
				this.height = height + this.width * 0.35
				// 填充背景色，白色
				ctx.setFillStyle('#FFFFFF')
				ctx.fillRect(0, 0, this. width,height + this.width * 0.35)
				// 绘制商品主图，二维码,文字图片
				ctx.drawImage(this.currentImg, 0, 0, this.width, height)
				ctx.drawImage(this.qr, this.width * 0.65, height + height * 0.01, this.width * 0.3, this.width * 0.3)
				// ctx.drawImage(this.wenziImg,0, this.height * 0.82, this.width * 0.6,this.height * 0.1)
				// // 3、绘制商品标题，多余文字自动换行
				ctx.font = 'normal bold 0px sans-serif';
				ctx.setFontSize(this.width * 0.06); // 字号
				ctx.setFillStyle("#344BA6") // 颜色
				ctx.fillText('扫码关注橘票儿', 15, height + height * 0.09)
				ctx.font = 'normal bold 0px sans-serif';
				ctx.setFontSize(this.width * 0.06); // 字号
				ctx.fillText('购 票 立 减 5 - 30 元', 15, height + height * 0.16)
				// 将上面的内容填充到canvas画布上
				ctx.draw(true, (ret) => {
					uni.hideToast()
					uni.showToast({
						icon: 'success',
						mask: true,
						title: '绘制完成',
						duration: 500
					});
					// 获取临时存放路径
					uni.canvasToTempFilePath({
						x: 0, //指定的画布区域的左上角横坐标	
						y: 0, //指定的画布区域的左上角纵坐标	
						width: this.width, //指定的画布区域的宽度
						height: this.height, //指定的画布区域的高度
						fileType: 'jpg', //图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
						canvasId: 'myCanvas',
						quality: 1,
						fail: (err) => {
							console.log(err)
							// this.drawPoster()
						},
						complete: (res) => {
							this.posterUrl = res.tempFilePath
							// console.log(this.posterUrl)
						}
					})
				})
			},
			// 判断保存图片的权限是否开启
			saveStatus() {
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) {
							this.saving()
						} else {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saving()
								},
								fail: () => {
									uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
										success: () => {
											console.log("authSetting")
										},
										fail: () => {
											console.log('设置相册')
											uni.showToast({
												title: '请打开相册权限，再点击保存相册',
												icon: "none",
												duration: 1000
											})
										}
									})
								}
							})
						}
					}
				})
			},
			// 保存图片
			saving() {
				uni.showModal({
					title: '提示',
					title: '确定要保存到相册吗',
					cancelText: "取消",
					confirmText: '确定',
					success: (res) => {
						if (res.confirm) {
							uni.saveImageToPhotosAlbum({
								filePath: this.posterUrl,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败",
										icon: "none"
									});
								}
							})
						} else {}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.total_top {
			.top_back {
				position: absolute;
				width: 130rpx;
				height: 120rpx;
				padding-top: 60rpx;
				padding-left: 18rpx;
				z-index: 9999;
				// background-color: $uni-color-error;
				.top_img {
					width: 36rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.swiper {
				width: 100vw;
				height: 85vh;
				position: relative;
				overflow: hidden;

				// z-index: -999;
				.backImg {
					width: 100%;
					height: 100%;
					position: absolute;
					bottom: 0;
					z-index: -10;
					filter: blur(40px);
				}

				.swiper_scroll {
					height: 100%;
					// padding-top: 130rpx;
					position: relative;

					.swiper-item {
						// position: absolute;
						display: flex;
						align-items: center;

						.border {
							transform: scale(.75);

							image {
								width: 480rpx;
								height: 750rpx;
								border: 8rpx solid #fff;
							}
						}
					}
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100vw;
				height: 15vh;

				.bottom_left {
					width: 65%;

					.text {
						box-sizing: border-box;
						color: #aaa;
						font-size: 24rpx;
						margin-top: 20rpx;
						padding-left: 80rpx;
					}
				}

				.bottom_right {
					width: 35%;

					image {
						width: 175rpx;
						height: 175rpx;
					}
				}

				.com {
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.isShow{
			position: relative;
		}

		.poster {
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			// transform: scale(.9);
			// top: 70rpx;
			// left: 66rpx;
			// bottom: 14.5vh;
			// height: 80vh;
			.dd{
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				// margin: 0 auto;
			}
		}
	}

	.active {
		transform: scale(1) !important;
	}

	.fileter {
		filter: blur(40px);
	}

	.bn {
		position: absolute;
		top: 87vh;
		left: calc(50% - 200rpx);
		z-index: 999;
	}

	.button {
		// margin: 0 auto;
		width: 400rpx;
		height: 80rpx;
		box-shadow: 6rpx 6rpx 8rpx rgba(204, 69, 59, .2);
		margin-top: 20rpx;
		font-size: 32rpx;
		height: 80rpx;
		border-radius: 500rpx;
		color: #f8f8f8;
	}
</style>
